<template>
	<view class="count">
		<view class="top f f-a-c f-d-c f-j-c">
			<view class="num">
				{{scores}}
			</view>
			<view @click="signFn" class="Sign">
				签到
			</view>
		</view>
		<!-- 下面的主体 -->
		<view class="body">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="oneOnreachBottom">
				<view class="points">
					积分明细
				</view>
				<view class="title f f-a-c f-j-b">
					<view class="">
						变更时间
					</view>
					<view class="">
						变更积分值
					</view>
					<view class="">
						变更方式
					</view>
				</view>
				<view v-for="(item,index) in list" :key="index" class="item f f-a-c f-j-b">
					<view class="left">
						{{item.created_at}}
					</view>
					<view class="cen">
						{{item.score==6?item.score:item.score==7?item.score:item.score==8?item.score:item.score>0?'+'+item.score:item.score}}
					</view>
					<view class="rig">
						{{item.from==1?'签到增加':item.from==2?'书籍评论增加':item.from==3?'书籍回复增加':item.from==4?'拉新增加':item.from==5?'参与读书会增加':item.from==6?'兑换减少':item.from==7?'书籍评论删除减少':item.from==9?'阅读通关答题增加':'书籍回复删除减少'}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				taol: 0,
				list: [],
				scores: ''
			}
		},
		onShow() {
			this.initList()
		},
		methods: {
			async initList() {
				let n = await this.$api.Scores({
					page: this.page
				})
				this.taol = n.data.scores.total
				this.scores = n.data.score
				if (this.list.length <= this.taol) {
					this.list = [...this.list, ...n.data.scores.data]
				} else {
					this.list = n.data.scores.data
				}
			},
			async signFn() {
				let n = await this.$api.Clock_in()
				this.$msg(n.message)
				setTimeout(() => {
					this.page = 1
					this.list = []
					this.initList()

				}, 1000)
			},
			oneOnreachBottom() {
				console.log('123');
				this.page++
				this.initList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #ece7e7;

		.left {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #333333;
			text-align: left;
		}

		.cen {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #14b284;
		}

		.rig {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: right;
			color: #333333;
		}
	}

	.item:last-child {
		border-bottom: none;
	}

	.title {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
	}

	.body {
		height: calc(100vh - 250rpx);
		padding: 20rpx;
		overflow-y: auto;

		.points {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			margin: 20rpx 0;
			color: #333333;
		}
	}

	.top {
		width: 100%;
		height: 250rpx;
		background: #009d85;

		.num {
			font-size: 60rpx;
			font-family: DIN, DIN-Regular;
			font-weight: 600;
			text-align: left;
			color: #ffffff;
		}

		.Sign {
			margin-top: 20rpx;
			width: 200rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			background: #ffffff;
			border-radius: 32rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 600;
			color: #009d85;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #fff;
	}
</style>